<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bulma Wedding Planner Template</title>
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400&display=swap" as="style">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400&display=swap">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css"/>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
    

  </head>
<body>
    <!--Wrapper-->
    <div id="wrapper" class="has-text-centered-mobile">
        <!--Hero-->
        <section id="hero" class="hero is-medium">
            <div class="hero-head">
                <nav class="navbar">
                    <div class="container">
                        <div class="navbar-brand">
                            <a class="navbar-item" href="#">
                                <img src="https://img.icons8.com/dusk/64/000000/p.png" width="30" height="30">
                              </a>
                            <a class="navbar-item">
                                <h3 class="logo has-text-green is-size-4">Wedding Planner</h3>
                            </a></div>

                        <div class="navbar-menu">

                            <div class="navbar-end">
                                <a class="a-menu is-size-6 navbar-item">
                                    home
                                </a>
                                <a class="a-menu is-size-6 navbar-item">
                                    about
                                </a>
                                <a class="a-menu is-size-6 navbar-item">
                                    features
                                </a>
                                <a class="a-menu is-size-6 navbar-item">
                                    contact
                                </a>
                            </div>
                        </div>
                        <span class="navbar-burger burger" data-target="navbarMenuHeroA">
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </div>
                </nav>
            </div>
            <div class="hero-body">
                <div class="container">
                    <div class="columns">
                        <div class="column">
                            <h1 class="title">Engaging line</h1>
                            <p class="has-text-centered-mobile">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida rutrum quisque non tellus orci ac auctor. Quis enim lobortis scelerisque fermentum.

                            </p>
                            <hr class="rounded">
                            <div class="is-divider" data-content="   "></div>

                            <p class="subtitle is-3" style="margin-top: 20px;">
                                What we offer
                            </p>
                            <p class="has-text-centered-mobile">
                                <i class="fa fa-check" aria-hidden="true" style="color: #72ddf7;"></i>
                                Lorem ipsum dolor sit amet
                            </p>
                            <p class="has-text-centered-mobile">
                                <i class="fa fa-check" aria-hidden="true" style="color: #72ddf7;"></i>
                                Augue mauris augue neque gravida in
                            </p>
                            <p class="has-text-centered-mobile">
                                <i class="fa fa-check" aria-hidden="true" style="color: #72ddf7;"></i>
                                Faucibus pulvinar elementum integer
                            </p>
                            <p class="has-text-centered-mobile">
                                <i class="fa fa-check" aria-hidden="true" style="color: #72ddf7;"></i>
                                Faucibus purus in massa tempor nec
                            </p>
                            <p class="has-text-centered-mobile">
                                <i class="fa fa-check" aria-hidden="true" style="color: #72ddf7;"></i>
                                Ante metus dictum at tempor commodo
                            </p>
                            <button id="learnbtn" type="button" class="button is-size-6 is-rounded " style="margin-top: 15px;">
                                Learn more
                            </button>
                        </div>
                            
                        <div class="column">
                            <img src="img/undraw_wedding_t1yl.svg">
                        </div>
                    </div>
                </div>
            </div>
        </section>

    <section id="users-feed" class="section">
        <div class="container">
            <div class="columns">
                <div class="column">
                    <div class="box">
                        <article class="media">
                            <div class="media-left">
                                <figure class="is-64x64"\>
                                    <img src="img/man-user-person-male-profile-avatar-icon.svg">
                                </figure>
                            </div>
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>Some Name</strong> <small>@somename</small>
                                        <br>
                                        Pellentesque nec nam aliquam sem et tortor.Tristique et egestas quis ipsum suspendisse.
                                    </p>
                                </div>
                            </div>

                        </article>
                    </div>
                </div>
                    <div class="column">
                        <div class="box">
                            <article class="media">
                                <div class="media-left">
                                    <figure class="is-64x64"\>
                                        <img src="img/female-user-girl-person-glasses-avatar-icon.svg">
                                    </figure>
                                </div>
                                <div class="media-content">
                                    <div class="content">
                                        <p>
                                            <strong>Some Name</strong> <small>@somename</small>
                                            <br>
                                            Libero id faucibus nisl tincidunt eget. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. 
                                        </p>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
            </div>
        </div>
    </section>

    <section id="features" class="sectionf">
        <div class="container">
            <div class="columns reverse-row-order">
                <div class="column">
                    <h1 class="title">Step one</h1>
                    <p class="has-text-black paragraph">
                        Scelerisque fermentum dui faucibus in ornare quam viverra orci. Ultricies mi quis hendrerit dolor. Aliquet lectus proin nibh nisl condimentum. Sit amet dictum sit amet justo donec. Iaculis eu non diam phasellus vestibulum lorem.
                    </p>
                </div>
                <div class="column">
                    <img src="img/undraw_agreement_aajr.svg" style="width: 70%;">
                </div>
            </div>
        </div>

        <br>
        <br>

        <div class="container">
            <div class="columns reverse-row-order">
                <div class="column">
                    <img src="img/undraw_window_shopping_b96y.svg" style="width: 50%;">
                </div>
                <div class="column">
                    <h1 class="title">Step two</h1>
                    <p class="has-text-black paragraph">
                        Scelerisque fermentum dui faucibus in ornare quam viverra orci. Ultricies mi quis hendrerit dolor. Aliquet lectus proin nibh nisl condimentum. Sit amet dictum sit amet justo donec. Iaculis eu non diam phasellus vestibulum lorem.
                    </p>
                </div>
            </div>
        </div>

       

        <div class="container">
            <div class="columns reverse-row-order">
                <div class="column">
                    <h1 class="title">Step three</h1>
                    <p class="has-text-black paragraph">
                        Scelerisque fermentum dui faucibus in ornare quam viverra orci. Ultricies mi quis hendrerit dolor. Aliquet lectus proin nibh nisl condimentum. Sit amet dictum sit amet justo donec. Iaculis eu non diam phasellus vestibulum lorem.
                    </p>
                </div>
                <div class="column">
                    <img src="img/undraw_camera_mg5h.svg" style="width: 70%;">
                </div>
            </div>
        </div>

        <br>
        <br>

        <div class="container">
            <div class="columns reverse-row-order">
                <div class="column">
                    <img src="img/undraw_having_fun_iais.svg" style="width: 50%;" alt="">
                </div>
                <div class="column">
                    <h1 class="title">Step four</h1>
                    <p class="has-text-black paragraph">
                        Scelerisque fermentum dui faucibus in ornare quam viverra orci. Ultricies mi quis hendrerit dolor. Aliquet lectus proin nibh nisl condimentum. Sit amet dictum sit amet justo donec. Iaculis eu non diam phasellus vestibulum lorem.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="hero" id="hotel-gallery" style="margin-top: 6rem;margin-bottom: 3rem;">
        <div class="hero-body is-paddingless">
          <div class="container" style="overflow:hidden;">
            <div class="content">
                <h1 class="title has-text-centered">Weddings Gallery</h1>
            </div>
            <section class="section is-paddingless">
              <div id="slider">
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-16by9 is-covered">
                      <img
                        src="https://images.unsplash.com/photo-1425421543490-6a133856ff32?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt=""
                      />
                    </figure>
                  </div>
                  <div class="card-content">
                    <div class="item__title">
                      Mon titre 1
                    </div>
                    <div class="item__description">
                      Ici une petite description pour tester le slider
                    </div>
                  </div>
                </div>
  
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-16by9 is-covered">
                      <img
                        src="https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt=""
                      />
                    </figure>
                  </div>
                  <div class="card-content">
                    <div class="item__title">
                      Mon titre 2
                    </div>
                    <div class="item__description">
                      Ici une petite description pour tester le slider
                    </div>
                  </div>
                </div>
  
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-16by9 is-covered">
                      <img
                        src="https://images.unsplash.com/photo-1504993945773-3f38e1b6a626?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                        alt=""
                      />
                    </figure>
                  </div>
                  <div class="card-content">
                    <div class="item__title">
                      Mon titre 3
                    </div>
                    <div class="item__description">
                      Ici une petite description pour tester le slider
                    </div>
                  </div>
                </div>
  
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-16by9 is-covered">
                      <img
                        src="https://images.unsplash.com/photo-1506072328856-cd6629b00b62?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                        alt=""
                      />
                    </figure>
                  </div>
                  <div class="card-content">
                    <div class="item__title">
                      Mon titre 4
                    </div>
                    <div class="item__description">
                      Ici une petite description pour tester le slider
                    </div>
                  </div>
                </div>
  
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-16by9 is-covered">
                      <img
                        src="https://images.unsplash.com/photo-1444920275954-9dddec6b714e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt=""
                      />
                    </figure>
                  </div>
                  <div class="card-content">
                    <div class="item__title">
                      Mon titre 5
                    </div>
                    <div class="item__description">
                      Ici une petite description pour tester le slider
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </section>

    <section id="contact" class="section">
        <div class="container">
            <h3 class="is-size-3 has-text-centered">
                <strong>Let s connect</strong>
            </h3>
            
                <div class="box">
                    <div class="columns">
                        <div class="column">
                            <img src="img/undraw_mobile_inbox_3h46.svg" style="height: 80%;">
                            <p class="has-text-black paragraph has-text-centered" style="padding-top: 10px;">
                                One of our team members will contact you soon  <i class="fa fa-heart" aria-hidden="true" style="color: red;"></i>

                            </p>
                        </div>
        
                        <div class="column">
                            <div class="field">
                                <label class="label">Name</label>
                                <div class="control">
                                  <input class="input" type="text" placeholder="Text input">
                                </div>
                              </div>
                              
                              <div class="field">
                                <label class="label">Email</label>
                                <div class="control has-icons-left has-icons-right">
                                  <input class="input" type="email" placeholder="Email input" placeholder="example@gmail.com">
                                  <span class="icon is-small is-left">
                                    <i class="fa fa-envelope"></i>
                                  </span>
                                  
                              </div>
                              
                              <div class="field">
                                <label class="label">Subject</label>
                                <div class="control">
                                    <input class="input" type="text" placeholder="Type subject">
                                  </div>
                              </div>
                              
                              <div class="field">
                                <label class="label">Message</label>
                                <div class="control">
                                  <textarea class="textarea" placeholder="Text area"></textarea>
                                </div>
                              </div>
                              
                              <div class="field">
                                <div class="control">
                                  <label class="checkbox">
                                    <input type="checkbox">
                                    I agree to the <a href="#">terms and conditions</a>
                                  </label>
                                </div>
                              </div>
                              
                              
                              <div class="field is-grouped">
                                <div class="control">
                                  <button class="button is-link">Submit</button>
                                </div>
                                <div class="control">
                                  <button class="button is-link is-light">Cancel</button>
                                </div>
                              </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>

    <section id="footer" class="section">
        <div class="container has-text-centered">
            <p class="has-text-black is-size-7">
                Built with <i class="fa fa-heart" aria-hidden="true" style="color: red;"></i> by restylianos
            </p>
            <a href="https://github.com/restylianos" class="is-size-4 social-link">
                <i class="fa fa-github" aria-hidden="true" style="color: black;"></i>
            </a>
            <a href="https://www.facebook.com/profile.php?id=100011674968506" class="is-size-4 social-link">
                <i class="fa fa-facebook-square" aria-hidden="true"></i>
            </a>
        </div>
    </section>
</div>

<!--script to move to the features section-->
<script>
$("button").click(function() {
    $('html,body').animate({
        scrollTop: $(".sectionf").offset().top},
        'slow');
});
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
  bulmaCarousel.attach('#slider', {
    slidesToScroll: 1,
    slidesToShow: 3,
    infinite: true,
  });
  let burger = document.querySelector('.burger');
  let navbar = document.querySelector('.navbar-menu');
  burger.addEventListener('click', () => {
    burger.classList.toggle('is-active');
    navbar.classList.toggle('is-active');
  });
});
</script>

</body>
</html>
